<!DOCTYPE html>
<html>

<head>
    <title>Bilibili专栏Markdown工具 - DOM to Image</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.css">
    <!--
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
      body {
        padding-top: 20px;
        padding-bottom: 20px;
    }
  -->
    </style>
</head>

<body class="markdown-body">
    <!--
<canvas id="canvas" style="border:2px solid black;"  width="800" height="800">
-->
    <div>
        <canvas id="canvas" style="border:2px solid black;" width="800" height="800">
        </canvas>
    </div>
    <table id="t">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>
    </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">
    </script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <script src="https://cdn.bootcss.com/marked/0.3.19/marked.min.js">
    </script>
    <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var t = document.getElementById('t');

    //var data = '<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800">' +
    var data = '<svg xmlns="http://www.w3.org/2000/svg">' +
        '<foreignObject width="100%" height="100%">' +
        '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:20px">' +
        '<em>I</em> like ' + t.innerHTML +
        '<span style="color:white; text-shadow:0 0 2px blue;">' +
        'cheese</span>' +
        '</div>' +
        '</foreignObject>' +
        '</svg>';
    data = encodeURIComponent(data);
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        console.log(canvas.toDataURL());

        canvas.toBlob(function(blob) {
            var newImg = document.createElement('img'),
                url = URL.createObjectURL(blob);

            newImg.onload = function() {
                // no longer need to read the blob so it's revoked
                URL.revokeObjectURL(url);
            };

            newImg.src = url;
            //document.body.appendChild(newImg);
        });
    }
    img.src = "data:image/svg+xml," + data;

    function getCss(obj, attribute) {
        if (obj.currentStyle) {
            return obj.currentStyle[attribute];
        } else {
            return window.getComputedStyle(obj, null)[attribute];
        }
    }
    </script>
</body>

</html>